<template>
	<view>
		<view class='zctab-bar-box'>
			<tab-bar style="width: 100%;" :tabBars="tabBar.tabBars" :tabIndex="tabBar.tabIndex" @tapTab="tapTab"></tab-bar>
			
			<view class="uni-tab-bar">
				<view :current="tabBar.tabIndex" >
					<view class="zc-tab-bar" v-if="tabBar.tabIndex === 0">
							<view class="title">金额(单位:万)：</view>
							<view v-if="opts1.categories.length>0">
								<view class='uChartWrap' v-if="chartId === 'm_Charts'">
									<u-charts :canvasId="'moneyCharts'" class='uChart' :chartType="opts1.chartType" :opts="opts1"></u-charts> 
								</view>
							</view>
						<view class="title">数量：</view>
						<view v-if="opts2.categories.length>0">
							<view class='uChartWrap' v-if="chartId === 'm_Charts'">
								<u-charts :canvasId="'m_Charts'" :chartType="opts2.chartType" :opts="opts2"></u-charts>
							</view>
						</view>
					</view>
					<view class="zc-tab-bar" v-else>
							<view class="title">金额(单位:万)：</view>
							<view v-if="opts1.categories.length>0">
								<view class='uChartWrap' v-if="chartId === 'd_Charts'">
									<u-charts :canvasId="'d_moneyCharts'" class='uChart' :chartType="opts1.chartType" :opts="opts1"></u-charts> 
								</view>
							</view>
						<view class="title">数量：</view>
						<view v-if="opts2.categories.length>0">
							<view class='uChartWrap' v-if="chartId === 'd_Charts'">
								<u-charts :canvasId="'Charts'" :chartType="opts2.chartType" :opts="opts2"></u-charts>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import tabBar from "../../components/tab-bar/tab-bar.vue"
	import uCharts from "../../components/u-charts/u-charts.vue"
	
	let _this;
	export default {
		components:{
			tabBar,
			uCharts
		},
		data() {
			return {
				date:'',
				year:'',
				chartId:'m_Charts',
				tabBar:{
					tabIndex:0,
					tabBars:[
						{
							name:'月销售业绩'
						},
						{
							name:'日销售业绩'
						}
					]
				},
				opts1:{
					chartType:'line',	// 参数为 column（柱状图） 、 line（折线图）
					categories: [],
					series: [{
						name: '金额',
						data: [],
						color: '#8c54ff'
					}]
				},
				opts2:{
					chartType:'column',	// 参数为 column（柱状图） 、 line（折线图）
					categories: [],
					series: [{
						name: '总保单',
						data: [],
						color: '#968cf8'
					}, {
						name: '新保单',
						data: [],
						color: '#a7c35a'
					}, {
						name: '非车险卡单',
						data: [],
						color: '#d8d0b3'
					}]
				}
			}
		},
		onLoad() {
			_this = this;
			let date = new Date();
			date = date.toJSON().split('T')[0];
			_this.date = date;
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			_this.zcQuerySalesMan4MoneyStatistic('m');
		},
		methods: {
			tapTab(e){
				this.tabBar.tabIndex=e;
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				if (e === 0) {
					_this.zcQuerySalesMan4MoneyStatistic('m');
				}else if (e === 1) {
					_this.zcQuerySalesMan4MoneyStatistic('d');
				}
			},
			zcQuerySalesMan4MoneyStatistic(type) {
				let Today = '';
				if (type === 'm') {
					Today = _this.month;
				}else if (type === 'd') {
					Today = _this.day;
				}
				
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'uni_Insure_Detail',
						Action: 'Ext_QuerySalesMan4MoneyStatistic',
						Data: {
							Today: _this.date,		//年
							ItemCount: 6,	//月份
							SumMode: type			//d - 按日合计, m - 按月合计
						}
					},
					Callback:function(resjson,scope) {
						if (resjson.state === 'back') {
							console.log('销售业绩 = ',resjson.data);
							if (!resjson.success) {
								uni.showModal({
									title:'温馨提示',
									showCancel:false,
									content:''+resjson.msg
								})
								return;
							}
							
							_this.opts2.categories = [];
							_this.opts1.categories = [];	//总保单 金额 X轴
							_this.opts1.series[0].data = [];	//总保单 金额
							_this.opts2.series[0].data = [];	//总保单
							_this.opts2.series[1].data = [];	//新保单
							_this.opts2.series[2].data = [];	//非车险卡单
							
							if (resjson.data!==null) {
								if (resjson.data.CalendarData!==null&&resjson.data.CalendarData.length > 0) {
									
									for (let i = 0; i < resjson.data.CalendarData.length; i++) {
										if (type === 'm') {
											_this.opts1.categories.push(resjson.data.CalendarData[i].month+'月');
											_this.opts1.series[0].data.push(resjson.data.CalendarData[i].InsureMoney);
											
											_this.opts2.categories.push(resjson.data.CalendarData[i].month+'月');
											_this.opts2.series[0].data.push(resjson.data.CalendarData[i].TotalInsureCount);
											_this.opts2.series[1].data.push(resjson.data.CalendarData[i].NewInsureCount);
											_this.opts2.series[2].data.push(resjson.data.CalendarData[i].CardCount);
											_this.chartId = 'm_Charts';
										}else if (type === 'd') {
											_this.opts1.categories.push(resjson.data.CalendarData[i].day+'日');
											_this.opts1.series[0].data.push(resjson.data.CalendarData[i].InsureMoney);
											
											_this.opts2.categories.push(resjson.data.CalendarData[i].day+'日');
											_this.opts2.series[0].data.push(resjson.data.CalendarData[i].TotalInsureCount);
											_this.opts2.series[1].data.push(resjson.data.CalendarData[i].NewInsureCount);
											_this.opts2.series[2].data.push(resjson.data.CalendarData[i].CardCount);
											_this.chartId = 'd_Charts';
										}
									}
									
								}
							}
							
						}
                        if (resjson.state === 'end') {
                            uni.hideLoading();
                        }
					},
					Scope: this
				})
			}
		}
	}
</script>

<style >
		.zctab-bar-box{
		width: 100%;
		/* height: 940upx; */
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
		.uni-tab-bar{
		width: 100%;
		flex: 1;
		height: 100%;
		position: relative;
	}
		.zc-tab-bar{
		overflow: hidden;
		display: block;
		will-change:transform;
		transition: all 0.4S ease-in;
		width: 100%;
		height: 100%;
		position: absolute;
	}
	.zc-swiper-tab{border-radius: 0!important;margin-bottom: 0!important;border: none!important;}
	.swiper-tab-list{width: 50%!important;background-color: #FFFFFF;border: none!important;padding: 20upx 0!important;}
	.uni-tab-bar .active{color: #3CA4F9!important;background-color: #FFFFFF;position: relative;text-align: center;}
	.uni-tab-bar .active:after{content: '';position: absolute;width: 25%;height: 5upx;background-color: #3CA4F9;left: 35%;bottom: 0;border-radius: 3upx;}
  .title{
		height: 100upx;
		line-height: 100upx;
		padding-left: 25upx;
		width: 100%;	
	}
	.uChartWrap{
		width: 100%;
		background: #fff;
		height: 400upx !important;
		padding-top: 50upx ;
	}
	.uChart{
		width: 100%;
		height: 400upx !important;
	
	}
	canvas{
		width: 100% !important;
		/* height: 400upx !important; */
	}
	.uni-tab-bar{overflow: auto;}
	.uni-tab-bar .zcSwiper-box{height: 100%;display: flex;width: 200%;}
	.zcSwiper-box .zc-tab-bar{position: relative;}
</style>
